/*
 * @Author: wangtao
 * @Date: 2021-02-18 11:21:01
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-04-22 11:06:59
 * @Description: file content
 */
import React from 'react';
import {
  View,
  StyleSheet,
  ScrollView,
} from 'react-native';
import {
  backWhite,
  empty03,
} from '@/images';
import {
  Button,
  msg,
  XMEmpty,
} from '@/common';
import {
  mainBgColorLightGray,
  px2dp,
  screenWidth,
} from '@/styles';
import api from '@/api';
import HeadTabs from '../../../components/HeadTabs';
import ImageViewer from '../../../components/XmImageViewer';
import InsuranceHeader from './components/insurance-header';
import InsuranceInfo from './components/insurance-info';
import InsurancePolicyHolder from './components/insurance-policy-holder';
import InsuranceInsured from './components/insurance-insured';
import InsuranceDuty from './components/insurance-duty';

const { Submit } = Button;

const tabSources = [
  {
    tab: '商业险',
    type: 1,
  },
  {
    tab: '交强险',
    type: 2,
  },
];

export default class InsuranceDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tabSelect: 1,
      insuranceDetail: {}, // 保单详情
      insuranceDetailSelct: {}, // 保单详情(已选)
      modalVisible: false,
      imageSources: [],
    };
  }

  componentDidMount() {
    const { navigation } = this.props;
    const state = navigation.state || {};
    const params = state.params || {};
    const { applicationNo } = params;
    this.getPolicyDetail(applicationNo);
  }

  componentWillUnmount() {}

  render() {
    const {
      tabSelect,
      insuranceDetail,
      insuranceDetailSelct,
      imageSources,
      modalVisible,
    } = this.state;
    // if (!insuranceDetailSelct.id) {
    //   return null;
    // }
    return (
      <View style={styles.container}>
        <HeadTabs
          tabSources={tabSources}
          changeStatus={(type) => this.changeStatus(type)}
          status={tabSelect} // 当前选中的页面下标状态
          style={{ width: screenWidth }}
        />
        {insuranceDetailSelct.id ? (
          <ScrollView
            contentContainerStyle={styles.scrollContainer}
            showsVerticalScrollIndicator={false}
          >
            <InsuranceHeader insuranceDetailSelct={insuranceDetailSelct} />
            <InsuranceInfo insuranceDetailSelct={insuranceDetailSelct} />
            <InsurancePolicyHolder
              insuranceDetailSelct={insuranceDetailSelct}
            />
            <InsuranceInsured insuranceDetailSelct={insuranceDetailSelct} />
            <InsuranceDuty insuranceDetailSelct={insuranceDetailSelct} />
            <Submit
              text='查看电子保单'
              boxStyle={{
                width: px2dp(640),
                height: px2dp(96),
                borderRadius: px2dp(12),
                overflow: 'hidden',
                marginTop: px2dp(56),
              }}
              btnStyle={{}}
              btnTextStyle={{
                fontSize: px2dp(36),
              }}
              onClick={() => {
                this.checkTemp();
              }}
            />
          </ScrollView>
        ) : (
          <XMEmpty
            emptyImg={empty03}
            desc='您还没有此类保险~'
            boxStyle={{
              marginTop: px2dp(180),
            }}
          />
        )}

        <ImageViewer
          leftBackIcon={backWhite}
          showViewModal={() => this.setState({ modalVisible: false })}
          previewModal={modalVisible}
          images={imageSources}
        />
      </View>
    );
  }

  checkTemp = () => {
    const { insuranceDetail } = this.state;
    let tempImgs = insuranceDetail.files.map((item) => {
      return { url: item };
    });
    this.setState({
      modalVisible: true,
      imageSources: tempImgs,
    });
  };

  onChange = (key, val) => {
    this.setState({ [key]: val });
  };

  changeStatus = (tabSelect) => {
    // 根据status 状态去加载不同的数据
    const { insuranceDetail } = this.state;
    const {
      carNo,
      carOwnerName,
      carOwnerType,
      carType,
      carTypeName,
      applicationNo,
      insurBusiNo,
      taxAmount,
      insurAmount,
      insurAllAmount,
      infoResps,
    } = insuranceDetail;
    let infoResp = infoResps.find((item) => {
      if (item.insurType == tabSelect) {
        return true;
      }
    });
    let insuranceDetailSelct = {
      carNo,
      carOwnerName,
      carOwnerType,
      carType,
      carTypeName,
      applicationNo,
      insurBusiNo,
      taxAmount,
      insurAmount,
      insurAllAmount,
      ...infoResp,
    };
    this.setState({ insuranceDetailSelct, tabSelect });
  };

  // 我的申请详情
  getPolicyDetail = (id) => {
    api.insurance.getPolicyDetail(id).then((res) => {
      if (res.success) {
        const { tabSelect } = this.state;
        const {
          carNo,
          carOwnerName,
          carOwnerType,
          carType,
          carTypeName,
          applicationNo,
          insurBusiNo,
          taxAmount,
          insurAmount,
          insurAllAmount,
          infoResps,
        } = res.data;
        let infoResp = infoResps.find((item) => {
          if (item.insurType == tabSelect) {
            return true;
          }
        });
        let insuranceDetailSelct = {
          carNo,
          carOwnerName,
          carOwnerType,
          carType,
          carTypeName,
          applicationNo,
          insurBusiNo,
          taxAmount,
          insurAmount,
          insurAllAmount,
          ...infoResp,
        };
        this.setState({ insuranceDetail: res.data, insuranceDetailSelct });
      } else {
        msg.emit('app:tip', { text: res.msg });
      }
    });
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: mainBgColorLightGray,
    alignItems: 'center',
  },
  scrollContainer: {
    alignItems: 'center',
    paddingBottom: px2dp(80),
  },
});
